<template>
    <div class="user-contener">
<!-- 面包屑导航 -->
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-input placeholder="请输入内容" class="input-with-select">
                <el-button icon="el-icon-search"></el-button>
            </el-input>
            <el-button type="primary" @click="addUserVisible =! addUserVisible">添加用户</el-button>
            <!-- 表格内容 -->
            <el-table border style="width: 100%" :data="userdata">
                <el-table-column type="index" prop="username"  width="80">
                </el-table-column>
                <el-table-column prop="username" label="用户" width="80">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="180">
                </el-table-column>
                <el-table-column prop="mobile" label="电话">
                </el-table-column>
                <el-table-column prop="role_name" label="角色">
                </el-table-column>
                <el-table-column label="状态" width="70">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="190">
                    <template slot-scope="scope">
                        <!-- 编辑按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="userUpdata(scope)"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="userDelect"></el-button>
                        <!-- 分配角色按钮 -->
                        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                        <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
             <div class="block">
                 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="nowpage" :page-sizes="pagesizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">

                 </el-pagination>
            </div>
            <!-- 添加用户的弹框 -->
        <el-dialog
        title="添加用户"
        :visible.sync="addUserVisible"
        width="50%">
        <!-- Start：添加用户表单 -->
        <el-form :model="userdata1" :rules="adduserrules" ref="addUserFormRef" label-width="70px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userdata1.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userdata1.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userdata1.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="userdata1.phone"></el-input>
          </el-form-item>
        </el-form>
        <!-- Ended：添加用户表单 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addUserVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
      </el-dialog>
        </el-card>
    </div>
</template>

<script>
import mix from '../mixins/users-mixin.js'
export default {
  mixins: [mix]
}
</script>
<style lang='less' scoped>
.el-card{
    margin: 20px 0;
}
.input-with-select{
    width: 300px;
}
.el-form-item{
    width: 100%;
}
</style>
